official routes map

定义路由表

import { Navigate, useRoutes } from "react-router-dom"
import From from "../from"
import To from "../to"
import To0 from "../to0"

export default function AutoRoutes() {
  const config = useRoutes([
    {
      path: "/",
      element: <Navigate to="/from" />
    },
    {
      path: "/from",
      element: <From />
    },
    {
      path: "/to",
      element: <To />,
      children: [
        {
          path: "to0",
          element: <To0 />
        }
      ]
    }
  ])
  return config
}

使用路由表

import { HashRouter, Link } from "react-router-dom"
import AutoRoutes from "./router"

export default function Main() {
  return (
    <HashRouter>
      <div>
        <Link to="/from">From Component</Link>
        <Link to="/to">To Component</Link>
      </div>
      {/* 注入的对象依旧要放在HashRouter或者BrowserRouter中 */}
      <AutoRoutes />
    </HashRouter>
  )
}